<template>
  <div class="mobile">
    <div class="m-bar">
      <el-row>
        <el-col :span="2"><van-icon name="exchange" @click="switchKeeper" /></el-col>
        <el-col :span="20">{{ salon.sname }} - 院长</el-col>
        <el-col :span="2"><van-icon name="cross" @click="logout" /></el-col>
      </el-row>
    </div>
    <div class="m-summary">
      <van-rate v-model="starValue" :size="25" color="#ffd21e" void-icon="star" void-color="#eee" :readonly="true" />
      <p style="color: gray; margin-top: 5px">本月积分：100</p>
    </div>
    <router-view :sname="salon.sname" />
    <div style="height: 50px" />
    <van-tabbar route>
      <van-tabbar-item to="/mobile/director/alarm" icon="balance-o">报警</van-tabbar-item>
      <van-tabbar-item to="/mobile/director/input-money" icon="shop-o">产值</van-tabbar-item>
      <van-tabbar-item to="/mobile/director/input-cost" icon="shop-o">成本</van-tabbar-item>
      <van-tabbar-item to="/mobile/director/plan" icon="shop-o">计划</van-tabbar-item>
      <van-tabbar-item to="/mobile/director/deploy" icon="shop-o">调配</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { setToken } from '@/utils/auth';
import { mapGetters } from 'vuex';
import Tabbar from 'vant/lib/tabbar';
import TabbarItem from 'vant/lib/tabbar-item';
import 'vant/lib/tabbar/style';
import 'vant/lib/tabbar-item/style';
import { getSalon } from '@/api/txs';
import Rate from 'vant/lib/rate';
import 'vant/lib/rate/style';
import { getAdminById, getTokenKeeper } from '@/api/admin';
import Notify from 'vant/lib/notify';
import 'vant/lib/notify/style';

export default {
  components: {
    [Notify.name]: Notify,
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    [Rate.name]: Rate,
  },
  data() {
    return {
      salon: {
        sname: '',
      },
      starValue: 0,
    };
  },
  computed: {
    ...mapGetters(['openId', 'deptId', 'id']),
  },
  created() {
    if (this.deptId === 213) {
      this.$router.push('/mobile/keeper');
    }
    getAdminById(this.id).then(res => {
      if (res.data.data) {
        this.starValue = res.data.data.star;
      }
    });
    this.fetchData();
  },
  methods: {
    async logout() {
      await this.$store.dispatch('user/logout').then(res => {
        this.$router.push(`/login`);
      });
    },
    fetchData() {
      getSalon(this.openId).then(res => {
        this.salon = res.data.data;
      });
    },
    switchKeeper() {
      // 更新token
      getTokenKeeper(this.openId).then(res => {
        const token = res.data.token ? res.data.token : '';
        if (token === '') {
          Notify({ type: 'warning', message: '没有院长对应的管家，请联系管理员' });
        } else {
          setToken(token);
          // 跳转到管家
          // this.$router.push('/mobile/keeper')
          window.location.reload();
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.mobile {
  background-color: #f7f8fa;
  height: 100%;
  .m-bar {
    background-color: #fff;
    color: #c31171;
    font-size: 30px;
    line-height: 80px;
    text-align: center;
    box-shadow: 0px 0px 10px rgb(201, 201, 201);
    margin-bottom: 10px;
  }
  .m-summary {
    display: flex;
    font-size: 30px;
    // line-height: 80px;
    // margin-bottom: 20px;
    justify-content: space-between;
    width: 100%;
    padding: 0 50px 0 50px;
  }
}
</style>
